sc = require("https://cdn.jsdelivr.net/npm/@tdajs/simplicial-complex@1.2.1/dist/min.js")
import { slider } from "@jashkenas/inputs"
{
const svg = d3
.create("svg")
.attr("class", "canvas")
.style("margin-left", "15px")
.style("width", "100%")
.style("height", height);
svg
.append("path")
.attr("class", "shape")
.attr("stroke", "royalblue")
.attr("fill", "none")
.attr("d", d3.line()(X));
svg
.selectAll(".vertex")
.data(S)
.join("circle")
.attr("class", "vertex")
.attr("class", "vertex")
.attr("fill", "pink")
.attr("cx", (d) => d[0])
.attr("cy", (d) => d[1])
.attr("r", "2.5px");
drawBalls(svg); drawRips(svg, sc.rips(S, scale, 2));
return svg.node();
}X = lissajous(center, 0, center[0] - 70, center[1] - 50, 3, 2, 2000)
S = lissajous(center, tol, center[0] - 70, center[1] - 50, 3, 2, n)
center = [height / 2 + 60, height / 2]
height = 600
lissajous = function (
center,
tol = 5,
a = center[0] - 70,
b = center[1] - 50,
kx = 3,
ky = 2,
n = 300
) {
var t = d3.range(n).map(function (d) {
return (2 * Math.PI * d) / (n - 1);
});
var points = [];
for (var i = 0; i < n; i++) {
points[i] = [
center[0] +
a * Math.cos(kx * t[i]) +
d3.randomUniform(tol)() * Math.cos(d3.randomUniform(2 * Math.PI)()),
center[1] +
b * Math.sin(ky * t[i]) +
d3.randomUniform(tol)() * Math.sin(d3.randomUniform(2 * Math.PI)())
];
}
return points;
}
function dist2(a, b) {
if (a.length != b.length || a.length != 2) return null;
return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));
}
function diam2(points) {
var diam = 0;
points.forEach(function (p) {
points.forEach(function (q) {
diam = Math.max(diam, dist2(p, q));
});
});
return diam;
}
drawBalls = function (svg) {
svg
.selectAll(".A-ball")
.data(X)
.join("circle")
.attr("class", "A-ball")
.attr("cx", (d) => d[0])
.attr("cy", (d) => d[1])
.attr("r", scaleA)
.attr("fill", "royalblue")
.attr("stroke", "none")
.attr("opacity", "0.1");
svg
.selectAll(".B-ball")
.data(S)
.join("circle")
.attr("class", "B-ball")
.attr("cx", (d) => d[0])
.attr("cy", (d) => d[1])
.attr("r", scaleB)
.attr("fill", "pink")
.attr("stroke", "none")
.attr("opacity", "0.1");
return svg;
}